<template>
    <div class="appKind">
        <Dialog
            ref="dialog"
            @submit="addKind"
        ></Dialog>
        <dialog-edit
            ref="dialogEdit"
            :form="editForm"
            @submit="editKind"
        ></dialog-edit>
        <Ope
            class="ope"
            addFun="addData"
            delFun="delAllData"
            newFun="refreshData"
            :ifNew="true"
            :ifAdd="true"
            :ifDel="true"
            @addData="addData"
            @delAllData="delAllData"
            @refreshData="refreshData"
        ></Ope>
        <Table
            class="table"
            :tableData="kindData"
            @edit="edit"
            @del="del"
        ></Table>
        <el-pagination
            @current-change="changePage"
            style="margin-top: .6rem"
            background
            layout="prev, pager, next"
            :total="dataSum">
        </el-pagination>
    </div>
</template>

<script>

import axios from 'axios'

import Table from './Table'
import Ope from 'template/Ope'
import Dialog from './Dialog'
import DialogEdit from './DialogEdit'

import util from '@/util/util'

export default {
    components: {
        Table,
        Ope,
        Dialog,
        DialogEdit
    },
    name: 'AppKind',
    created () {
        this.loadAppKind();
        
    },
    data () {
        return {
            kindData: [],
            dataSum: 10,
            editForm: {},
            nowPage: 1
        }
    },
    methods: {
        editKind (form) {
            var imgUrl = '';
            form.kindAdvantage = form.kindAdvantage1 + ' ' + form.kindAdvantage2;
            this.$store.commit('showLoading');
            if(form.kindLogoUrl.substring(0, 4) === 'http') {
                //图片没有更换
                imgUrl = form.kindLogoUrl;
            }
            else {
                //图片更换了
                
                imgUrl = util.uploadFile(form.kindLogoUrl, this);
            }

            //请求更新
            axios.get('/index/AppKind/editAppKind', {
                params: {
                    id: form.id,
                    kindName: form.kindName,
                    kindLogoUrl: imgUrl,
                    kindAskPrice: form.kindAskPrice,
                    kindSolution: form.kindSolution,
                    kindAdvantage: form.kindAdvantage,
                    isShowPage: form.isShowPage ? 1 : 0,
                    isShow: form.isShow ? 1 : 0
                }
            }).then((datas) => {
                this.$message({
                    message: '更新成功！',
                    type: 'success'
                });
                this.refreshData();
            }, (err) => {
                console.log(err);
                this.refreshData();
            });
            
        },
        //编辑某行数据
        edit(index) {
            
            this.editForm = this.kindData[index];
            this.$refs.dialogEdit.show();
        },
        //删除某行数据
        del (index) {
            this.$confirm('确认删除该数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type:'warning'
            }).then(() => {

                var id = this.kindData[index].id;
                this.$store.commit('showLoading');
                axios.get('/index/AppKind/delAppKind', {
                    params: {
                        id: id
                    }
                }).then((datas) => {
                    var data = datas.data;
                    if (data.status === 0) {
                        this.$message({
                            message: '删除成功!',
                            type: 'success'
                        });
                    }
                    else {
                        this.$message.error('删除失败，服务器挂了！');
                    }
                    this.$store.commit('hiddenLoading');
                    this.refreshData();
                }, () => {
                    this.$message.error('删除失败，服务器挂了！');
                    this.$store.commit('hiddenLoading');
                    this.refreshData();
                });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                }); 
            });
        },
        changePage(index) {
            
            this.nowPage = index;
            this.refreshData();
        },
        refreshData () {
            
            this.loadAppKind();
        },
        //请求加载分类信息
        loadAppKind () {
            this.$store.commit('showLoading');
            var page = this.nowPage;
            axios.get('index/AppKind/getAppKind', {
                params: {
                    page: page,
                    dataNum: 10
                }
            }).then((datas) => {
                   
                    var data = datas.data;
                    if (data.status === 0) {
                        var kindDatas = data.data.kindDatas;
                        for(let i = 0; i < kindDatas.length; i ++) {
                            kindDatas[i].isShowPage = kindDatas[i].isShowPage === 1;
                            kindDatas[i].isShow = kindDatas[i].isShow === 1;
                            //标语间隔
                            var form = kindDatas[i];
                            var kindAdvantage = form.kindAdvantage;
                            var allKindAdvantage = kindAdvantage.split(' ');
                            kindDatas[i].kindAdvantage1 = allKindAdvantage[0];
                            kindDatas[i].kindAdvantage2 = allKindAdvantage[1];
                        }
                        this.kindData = kindDatas;
                        this.dataSum = data.data.dataSum;
                    }
                    else {
                        this.$message.error('加载数据失败!');
                    }
                    this.$store.commit('hiddenLoading');
                }, (err) => {
                    console.log(err)
                    this.$message.error('加载数据失败!');
                    this.$store.commit('hiddenLoading');
                });
        },
        addKind (form) {
            form.kindAdvantage = form.kindAdvantage1 + " " + form.kindAdvantage2;
            var imgUrl = util.uploadFile(form.kindLogoUrl, this);
            this.$store.commit('showLoading');
            axios.get('index/AppKind/addAppKind', {
                params: {
                    kindName: form.kindName,
                    kindLogoUrl: imgUrl,
                    kindAskPrice: form.kindAskPrice,
                    kindSolution: form.kindSolution,
                    kindAdvantage: form.kindAdvantage,
                    isShowPage: form.isShowPage ? 1 : 0,
                    isShow: form.isShow ? 1 : 0
                }
            }).then((datas) => {
                var  data = datas.data;
                if (data.status === 0) {
                    this.$message({
                        message: '新增成功',
                        type: 'success'
                    });
                }
                else {
                    this.$message.error("新增失败，可能是网络原因");
                }
                this.refreshData();
            }, (err) => {
                this.$message.error("新增失败，服务器挂了！");
                this.refreshData();
            });
                
            
        },
        addData() {
           
            this.$refs.dialog.show();
        },
        delAllData() {
            this.$confirm('删除所有数据后会导致不可恢复，确定删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.commit('showLoading');
                axios.get('/index/AppKind/delAllAppKind')
                .then((datas) => {
                    var data = datas.data;
                    if (data.status === 0) {
                        this.$message({
                            type: 'success',
                            message: '删除成功！'
                        });
                    }
                    else {
                        this.$message.error('删除失败，服务器挂了！');
                    }
                    this.refreshData();
                }, (err) => {
                    this.$message.error('删除失败，服务器挂了！');
                    this.refreshData();
                });         
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
    .appKind
        width 100%
        height 100%
        overflow hidden
        .table
            height 80%
            overflow scroll
        
</style>


